<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>ajax - JavaScript</title>
    <style>

    </style>
</head>
<body>
    <h1>ajax</h1>
    <p>
        AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。<br/>
        AJAX 不是新的编程语言，而是一种使用现有标准的新方法。<br/>
        AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。<br/>
        AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
    </p>

    <h4>学习目标</h4>
    <ol>
        <li>熟悉ajax原理</li>
        <li>熟悉ajax编写方式</li>
        <li>会查手册：https://www.runoob.com/ajax/ajax-tutorial.html</li>
    </ol>

    <div id="ajax" style="display: none; text-align: center;">
        <p>ajax原理</p>
        <img id="ajax-img" src="images/ajax原理.jpg" alt="ajax原理"/>
    </div>

    <!--登录表单-->
    <form id="login" style="display: none;" action="http://localhost:8888/login.php">
        账户：<input type="text" name="email" value="" /><br />
        密码：<input type="password" name="password" value="" /><br />
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
    </form>

    <form id="user-info" style="display: none;" action="http://localhost:8888/update.php">
        id：<input type="text" name="id" value="" /><br />
        姓名：<input type="text" name="name" value="" /><br />
        生日：<input type="text" name="birth" value="" /><br />
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
    </form>

    <script type="text/javascript">

        // -----------------------------
        // 0. ajax原理是？为什么要有ajax？
        // -----------------------------
        /*
            页面无刷新有什么好处？
        */

        // -----------------------------
        // 1. XMLHttpRequest 对象
        // -----------------------------
        /*
            XMLHttpRequest 是 AJAX 的基础。
            所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
            XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
         */
        // 1.1 实例化一个 XMLHttpRequest对象，打印查看原型链


        // -----------------------------
        // 2. 发送请求
        // -----------------------------
        /*
            发送请求：
                open(method,url,async)
                    规定请求的类型、URL 以及是否异步处理请求。
                    method：请求的类型；GET 或 POST
                    url：文件在服务器上的位置
                    async：true（异步）或 false（同步）

                send(string)
                    将请求发送到服务器。
                        string：仅用于 POST 请求

                setRequestHeader(header,value) // 设置请求头
                    示例：setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 设置表单提交的头

         */
        // 2.1 登录表单改造成异步请求的方式


        // -----------------------------
        // 3. 响应请求
        // -----------------------------
        /*
            onreadystatechange  // 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
            readyState // 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
                        0: 请求未初始化
                        1: 服务器连接已建立
                        2: 请求已接收
                        3: 请求处理中
                        4: 请求已完成，且响应已就绪
            status
                 	200: "OK"
                    404: 未找到页面
            responseText // 服务器返回内容
         */
        // 3.1 接2例的请求，处理返回数据，显示是否登录成功。



        // ----------------------------------------------------
        // -- 练习
        // ----------------------------------------------------
        // 1. 使用get异步请求地址：http://localhost:8888/userinfo.php
        //      user.php 返回用户信息：{"id":1, "name": "韦小宝", "生日": "2008-05-08"}
        //      然后写入用户信息修改表单：user-info
        // 2. 接上例：修改信息表单使用异步提交。
        // 3. 使用异步请求服务端数据:
        //       [
        //           {"id": 1, "name": "苹果", "price": 5},
        //           {"id": 2, "name": "香蕉", "price": 2.5},
        //           {"id": 3, "name": "火龙果", "price": 6},
        //           {"id": 4, "name": "车厘子", "price": 78},
        //       ]
        //      在表格里显示。
        // 4. 设计一个按钮，异步请求服务端学生数据，请求完成后，使用表格显示。
        //      学生数据请参考：学生库学生信息表


    </script>
</body>
</html>